<template>
  <div class="permission-container">
    <div class="app-container">
      <!-- 表格 -->
      <el-card>
        <div style="text-align: right; margin-bottom: 20px">
          <el-button type="primary" size="small" @click="handleOpen(1, '0')"
            >添加权限</el-button
          >
        </div>
        <!-- 
            row-key: 树形结构的展示的唯一标识
         -->
        <el-table border stripe :data="permissionList" row-key="id">
          <el-table-column label="名称" prop="name" />
          <el-table-column label="标识" prop="code" />
          <el-table-column label="描述" prop="description" />
          <el-table-column label="操作">
            <template #default="{ row }">
              <!-- 
                  type: 1 -> 页面的访问权限(类似一级部门) -> 需要显示添加权限点按钮
                  type: 2 -> 页面中按钮的权限(类似二级部门)
               -->
              <el-button
                size="small"
                type="text"
                v-if="row.type === 1"
                @click="handleOpen(2, row.id)"
                >添加权限点</el-button
              >
              <el-button size="small" type="text" @click="handleShow(row.id)"
                >查看</el-button
              >
              <el-button size="small" type="text" @click="handleDel(row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <!-- 添加/编辑 权限弹框 -->
      <el-dialog :title="showTitle" :visible="isShow" @close="onClose">
        <!-- 表单内容 -->
        <el-form label-width="100px">
          <el-form-item label="权限名称">
            <el-input v-model="formData.name" />
          </el-form-item>
          <el-form-item label="权限标识">
            <el-input v-model="formData.code" />
          </el-form-item>
          <el-form-item label="权限描述">
            <el-input v-model="formData.description" />
          </el-form-item>
          <el-form-item label="权限启用">
            <el-switch
              v-model="formData.enVisible"
              active-value="1"
              inactive-value="0"
              active-color="#13ce66"
            />
          </el-form-item>
        </el-form>
        <!-- 按钮区域 -->
        <template #footer>
          <div style="text-align: right">
            <el-button @click="onClose">取消</el-button>
            <el-button type="primary" @click="handleOK">确定</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getPermissionListAPI,
  getPermissionAPI,
  postPermissionAPI,
  delPermissionAPI,
  putPermissionAPI,
} from "@/api/permissions";
import { list2Tree } from "@/utils/transform";
export default {
  name: "Permissions",
  data() {
    return {
      // 权限列表
      permissionList: [],
      // 控制弹框的可见性
      isShow: false,
      // 添加权限表单
      formData: {
        enVisible: "0", // 启用禁用, 0禁用, 1启用
        name: "", // 名称
        code: "", // 权限标识
        description: "", // 描述
        type: "", // 类型标记了一级(页面访问权) 二级(按钮操作权)
        pid: "", // 添加到哪个节点下
      },
      // 记录是添加还是编辑状态，false是添加
      isEditing: false,
    };
  },
  computed: {
    // 弹框显示的标题
    showTitle() {
      return this.isEditing ? "编辑权限" : "添加权限";
    },
  },
  created() {
    this.getPermissionList();
  },
  methods: {
    // 点击查看时
    async handleShow(id) {
      // 1. 显示弹框
      this.isShow = true;
      // 2. 当前是编辑状态
      this.isEditing = true;
      // 3. 发请求，获取详情
      const resp = await getPermissionAPI(id);
      // 4. 给formData赋值，做回显
      this.formData = resp.data;
    },
    // 删除权限
    async handleDel(id) {
      try {
        // 1. 询问
        await this.$confirm("确定删除么？", "温馨提示", { type: "warning" });
        // 3. 确定
        // 发请求
        await delPermissionAPI(id);
        // 给提示
        this.$message.success("删除成功");
        // 重新获取数据
        this.getPermissionList();
      } catch (e) {
        // 2. 取消
        this.$message.info("已取消");
      }
    },
    // 点击新增权限(点)时
    handleOpen(type, pid) {
      // 1. 显示弹框
      this.isShow = true;

      // this.formData.type = type
      // this.formData.pid = pid

      // 2. 给formData中type和pid赋值
      this.formData = {
        ...this.formData,
        type,
        pid,
      };
      // 3. 当前是添加状态
      this.isEditing = false;
    },
    // 确定 添加/编辑
    async handleOK() {
      if (this.isEditing) {
        // 编辑
        // 1. 发起修改请求
        await putPermissionAPI(this.formData);
        // 3. 提示文字
        this.$message.success("编辑成功");
      } else {
        // 添加
        // 1. 发起添加请求
        await postPermissionAPI(this.formData);
        // 3. 提示文字
        this.$message.success("新增成功");
      }
      // 2. 关闭弹框
      this.onClose();
      // 4. 重新获取权限列表
      this.getPermissionList();
    },
    // 弹框关闭时
    onClose() {
      // 1. 关闭弹框
      this.isShow = false;
      // 2. 重置表单（手动清空）
      this.formData = {
        enVisible: "0", // 启用禁用, 0禁用, 1启用
        name: "", // 名称
        code: "", // 权限标识
        description: "", // 描述
        type: "", // 类型标记了一级(页面访问权) 二级(按钮操作权)
        pid: "", // 添加到哪个节点下
      };
    },
    // 获取权限列表
    async getPermissionList() {
      // 1. 发请求
      const resp = await getPermissionListAPI();
      // 2. 赋值
      // 转成树形
      this.permissionList = list2Tree(resp.data, "0");
    },
  },
};
</script>
